<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="/demo05/static/jq/jquery-3.3.1.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        html,
        body,
        .box-div{
            width: 100%;
            height: 100%;
            background-color: bisque;
        }
        .box-div{
            display:flex;
        }
        .header{
            width: 100%;
            height: 65px;
            background-color: white;
            display: flex;
            position: fixed;
            z-index: 4;
        }
        .header-left-ul{
            display: flex;
            list-style: none;
            align-items: center;
            height: 65px;
            width: 33%;
            /* border: 1px solid red; */
            font-size: 15px;
        }
        li{
            margin-left: 20px;
            cursor: pointer;
        }
        .zhihu-img{
            width: 40px;
        }
        .header-center-div{
            /* border: 1px solid red; */
            height: 65px;
            width: 34%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .select-label{
            width: 400px;
            height: 30px;
            border: 1px solid black;
            border-radius: 20px;
            display: flex;
        }
        input{
            margin-left: 15px;
            height: 30px;
            border: none;
            outline: none;
            width: 350px;
        }
        .sousuo-img{
            width: 30px;
        }
        .header-right-ul{
            display: flex;
            list-style: none;
            align-items: center;
            height: 65px;
            width: 33%;
            /* border: 1px solid red; */
            font-size: 15px;
        }
        .touxiang-img{
            width: 40px;
        }
        button{
            margin-left: 3px;
            width: 80px;
            height: 30px;
            border-radius: 20px;
            border: none;
            background-color: blue;
            color: white;
        }
        .content-div{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
        }
        .content-left-div{
            background-color: white;
            width: 55%;
            height: 100%;
            margin-top: 700px;
        }
        .content-right-div{
            background-color: white;
            width: 22%;
            height: 100%;
            margin-left: 20px;
            margin-top: 700px;
        }
        .content-left-ul{
            display: flex;
            list-style: none;
            align-items: center;
            height: 65px;
            width: 100%;
            /* border: 1px solid red; */
            font-size: 15px;
        }
        .content-data{
            height: 100px;
            width: 100%;
        }
        .geren-div{
            height: 120px;
            width: 125px;
            position: absolute;
            top: 8.7%;
            left: 72%;
            /* border:3px solid red; */
            background-color: white;
        }
        .dv-img{
            width: 18px;
        }
        .geren-div{
            background-size: 20px;
            display: none;
        }
        .geren-ul{
            list-style:none;
        }
        .content-top-div{
            position: absolute;
            background-color: white;
            width: 78%;
            height: 240px;
            top:85px;
        }
        .content-top-top-div{
            background-color: lightgray;
            width: 100%;
            height: 120px;
        }
        .touxiang-da-img{
            position: absolute;
            width: 150px;
            top: 60px;
            left: 30px;
            border-radius: 15px;
            border: 5px solid white;
        }
        .compile{
            position: absolute;
            width: 110px;
            height: 25px;
            left: 930px;
            top: 180px;
            padding-left: 15px;
            color: blue;
            border-radius: 13px;
            border: 2px solid blue;
        }
        .geren-div a{
            text-decoration: none;
            color: black;
            height: 50px;
            align-items: center;
        }
        .chuangzuo-img{
            width: 100%;
        }
        .ming{
            position: absolute;
            left: 240px;
            top: 145px;
        }
        .right-img{
            width: 30px;
        }
        .huise{
            color: #8e8e8e;
        }
        .guanzhukuang-div{
            height: 20px;
            width: auto;
            /*border: #098dee solid 1px;*/
        }

        .right-ul-but{
            width: 100%;
            height: 60px;
            border:2px solid blue;
            border-radius: 10px;
            background-color: white;
            color: blue;
            font-size: 20px;
            margin-left: 0px;
        }

        .content-div-button1{
            margin-left: 5px;
            width: 80px;
            height: 30px;
            border-radius: 5px;
            border: none;
            background-color: lightblue;
            color: royalblue;
        }

        .content-div-button2{
            margin-left: 5px;
            width: 40px;
            height: 30px;
            border-radius: 5px;
            border: none;
            background-color: lightblue;
            color: blue;
        }

        .right-img{
            margin-top: 20px;
            margin-left: 20px;
            width: 22px;
        }

        .data-lable-button{
            margin-left: 0px;
            width: 60px;
            height: 30px;
            border-radius: 5px;
            border: none;
            background-color: white;
            color: darkgray;
            font-size: 15px;
        }

        .content-data-lable{
            margin-left: 0px;
            margin-bottom: 10px;
        }
        .wrapper {
            display: flex;
            overflow: hidden;
            /*margin-bottom: 10px;*/
            /*border: 1px solid black;*/
            margin-left: 10px;
            margin-right: 10px;
        }

        .text {
            font-size: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: justify;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            position: relative;
        }

        .text::before {
            content: '';
            height: calc(100% - 24px);
            float: right;
            margin-left: 10px;
            margin-right: 10px;
        }

        .text::after {
            content: '';
            width: 999vw;
            height: 999vw;
            position: absolute;
            margin-left: -100px;
        }

        .btn {
            float: right;
            clear: both;
            margin-left: 10px;
            font-size: 16px;
            padding: 0 8px;
            background: #3F51B5;
            line-height: 24px;
            border-radius: 4px;
            color: #fff;
            cursor:  pointer;
            /* margin-top: -30px; */
        }

        .btn::before {
            content: '展开'
        }

        .exp {
            display: none;
        }

        .exp:checked+.text {
            -webkit-line-clamp: 999;
        }

        .exp:checked+.text::after {
            visibility: hidden;
        }

        .exp:checked+.text .btn::before {
            content: '收起'
        }

        .ajax-div{
            background-color: white;
        }
        .Suggested-Follows-box{
            display: none;
        }
        .Suggested-Follows-box-div3{
            display: none;
        }
    </style>
</head>
<body>
<div class="box-div">
    <div class="header">
        <ul class="header-left-ul">
            <li><img src="/demo05/img/zhihu.png" alt="" class="zhihu-img" onclick="window.location.href='toqian?ac=index'"></li>
            <li>首页</li>
            <li>知乎知学堂</li>
            <li>发现</li>
            <li>等你来答</li>
        </ul>
        <div class="header-center-div">
            <label class="select-label">
                <input type="text" placeholder="请搜索" />
                <img src="/demo05/img/搜索.png" alt="" class="sousuo-img"/>
            </label>
            <button>提问</button>
        </div>
        <ul class="header-right-ul">
            <li>消息</li>
            <li>私信</li>
            <li><img src="/demo05/img/头像.png" alt="" class="touxiang-img"/></li>
        </ul>
    </div>

    <div class="content-div">
        <div class="content-top-div">
            <img src="/demo05/img/头像.png" alt="" class="touxiang-da-img"/>
            <div class="content-top-top-div">

            </div>
            <div class="content-top-bottom-div">
                <h2 class="ming"><span id="mingzhi"></span></h2>
                <div class="compile">编辑个人资料</div>
            </div>
        </div>
        <div class="content-left-div">
            <ul class="content-left-ul">
                <li class="dongtai"><span>动态</span></li>
                <li><span>提问</span></li>
                <li><span>文章</span></li>
                <li><span>收藏</span></li>
                <li class="guanzhu"><span>关注</span></li>
            </ul>
            <hr>
            <div class="data">
                <div class="content-data">
                    <div class = "content-data-text"></div>
                </div>

                <div class="Suggested-Follows-box">
                    <div class="Suggested-Follows-box-div1">
                        <span class="guanzhu">我关注的人</span>
                        <span class="guanzhuwo">关注我的人</span>
                    </div>
                    <div class="Suggested-Follows-box-div2"></div>
                    <div class="Suggested-Follows-box-div3"></div>
                </div>
            </div>
        </div>
        <div class="content-right-div">
            <div>
                <img src="/demo05/img/geren-img/创作.png" alt="" class="chuangzuo-img"/>
            </div>

            <div class="guanzhukuang-div">
                <table>
                    <thead>
                    <tr>
                        <th style="width: 210px" class="guanzhu">关注了</th>
                        <th style="width: 210px" class="guanzhuwo">关注者</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td align='center'><span class="guanzhule"></span></td>
                        <td align='center'><span class="guanzhuwode"></span></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div class="geren-div" id="geren-div">
        <ul class="geren-ul">
            <li>
                <img src="/demo05/img/geren-img/用户.png" alt="" class="dv-img"/>
                <a href="#">我的主页</a>
            </li>
            <li>
                <img src="/demo05/img/geren-img/喜爱.png" alt="" class="dv-img"/>
                <a href="#">无障碍</a>
            </li>
            <li>
                <img src="/demo05/img/geren-img/空巢老人.png" alt="" class="dv-img"/>
                <a href="#">关怀版</a>
            </li>
            <li>
                <img src="/demo05/img/geren-img/设置.png" alt="" class="dv-img"/>
                <a href="#">设置</a>
            </li>
            <li>
                <img src="/demo05/img/geren-img/退出.png" alt="" class="dv-img"/>
                <a href="#" onclick="window.location.href='http://localhost:8080/demo05/qian/user?ac=logout'">退出</a>
            </li>
        </ul>
    </div>
</div>
</body>
<script>
    $(function() {
        $("#mingzhi").text(sessionStorage.getItem("username"));

        $.ajax({
            async:true,
            url:'http://localhost:8080/demo05/card?ac=selectFollow',
            type:"post",
            data:{
                limit:5,
            },
            dataType:"json",
            success:function (pb){
                let ocontentDataText = $(".content-data-text");
                console.log(pb.data)
                pb.data.forEach(function (item,index){
                    console.log(item);
                    let aaa = `
                <div class = "ajax-div">
                 <div class="wrapper">
                        <input id="exp${item.id}" class="exp" type="checkbox">
                        <div class="text">
                            <label class="btn" for="exp${item.id}"></label>
                            <h3>${item.title}</h3>
                            <span>${item.card_content}</span>
                        </div>
                    </div>
                    <div class="content-data-div">
                        <div>
                            <button class="content-div-button1" id="data-div-button"><div class="angle">&#9650 赞同</div></button>
                            <button class="content-div-button2" id="data-div-button2"><div class="angle">&#9660 </div></button>

                            <label for="" class="content-data-lable">
                                <img src="/demo05/img/评论.png" alt="" class="right-img">
                                <button class="data-lable-button">条评论</button>
                            </label>

                            <label for="" class="content-data-lable">
                                <img src="/demo05/img/分享.png" alt="" class="right-img">
                                <button class="data-lable-button">分享</button>
                            </label>

                            <label for="" class="content-data-lable">
                                <img src="/demo05/img/收藏.png" alt="" class="right-img">
                                <button class="data-lable-button">收藏</button>
                            </label>

                            <label for="" class="content-data-lable">
                                <img src="/demo05/img/更多.png" alt="" class="right-img">
                                <button class="data-lable-button"></button>
                            </label>
                        </div>
                    </div>
                </div>`
                    let odiv = $(".data>div>div>div")[index]
                    // $(odiv).children("h3").text(item.title);

                    // $(odiv).children("span").text(item.content);
                    ocontentDataText.append(aaa);
                });
            }
        });

        //点赞页面出现
        $(".dongtai").on('click',function (event){
            $('.content-data').css('display','block');
            $('.Suggested-Follows-box').css('display','none');
        });

        //关注用户出现，点赞页面出隐藏
        $(".guanzhu").on('click',function (event){
            $('.content-data').css('display','none');
            $('.Suggested-Follows-box').css('display','block');
            $('.Suggested-Follows-box-div2').css('display','block');
            $('.Suggested-Follows-box-div3').css('display','none');
        })

        $(".guanzhuwo").on('click',function (event){
            $('.content-data').css('display','none');
            $('.Suggested-Follows-box-div2').css('display','none');
            $('.Suggested-Follows-box-div3').css('display','block');
        })

        //查关注数
        selectgz();
        function selectgz(){
            $.ajax({
                async:true,
                url:'http://localhost:8080/demo05/follow?ac=selectgz',
                type:"post",
                data:{"id":sessionStorage.getItem("id")},
                dataType:"json",
                success:function (pb){
                    $(".guanzhule").html(pb.data);
                }
            })
        }

        //查所有关注的人
        $.ajax({
            async:true,
            url:'http://localhost:8080/demo05/user?ac=queryFollowUesr',
            type:"post",
            data:{"id":sessionStorage.getItem("id")},
            dataType:"json",
            success:function (pb){
                pb.data.forEach(function (itme,index) {
                    console.log(itme.img)
                    let img = $("<img src="+itme.img+" />");
                    let name = $("<div>")
                    name.append(img,itme.user_name)
                    let ospan = $("<span>");
                    let oa = $("<a href='#'>").text("已关注").on("click",function (event) {
                        Attention(event,itme.id);
                    });
                    ospan.append("<img id='img"+itme.id,oa);
                    let odiv = $("<div>");
                    odiv.append(name,ospan)
                    $(".Suggested-Follows-box-div2").append(odiv);
                    $(".Suggested-Follows-box-div2>div>div>img").css("width","50px")
                    $(".Suggested-Follows-box-div2>div>span>img").css("width","20px");
                    $(".Suggested-Follows-box-div2>div>span>a").css("text-decoration","none");
                    $(".Suggested-Follows-box-div2>div>span>a").css("color","black");
                    $(".Suggested-Follows-box-div2>div").css("display","flex");
                    $(".Suggested-Follows-box-div2>div").css("align-items","center");
                    $(".Suggested-Follows-box-div2>div").css("width","100%");
                    $(".Suggested-Follows-box-div2>div").css("justify-content","space-between");
                })
            }
        })

        //查关注我的
        $.ajax({
            async:true,
            url:'http://localhost:8080/demo05/user?ac=queryFollowMe',
            type:"post",
            data:{"id":sessionStorage.getItem("id")},
            dataType:"json",
            success:function (pb){
                $(".guanzhuwode").html(pb.code);
                pb.data.forEach(function (itme,index) {
                    console.log(itme.img)
                    let img = $("<img src="+itme.img+" />");
                    let name = $("<div>")
                    name.append(img,itme.user_name)
                    let ospan = $("<span>");
                    let oa = $("<a href='#'>").text("已关注").on("click",function (event) {
                        Attention(event,itme.id);
                    });
                    ospan.append("<img id='img"+itme.id,oa);
                    let odiv = $("<div>");
                    odiv.append(name,ospan)
                    $(".Suggested-Follows-box-div3").append(odiv);
                    $(".Suggested-Follows-box-div3>div>div>img").css("width","50px")
                    $(".Suggested-Follows-box-div3>div>span>img").css("width","20px");
                    $(".Suggested-Follows-box-div3>div>span>a").css("text-decoration","none");
                    $(".Suggested-Follows-box-div3>div>span>a").css("color","black");
                    $(".Suggested-Follows-box-div3>div").css("display","flex");
                    $(".Suggested-Follows-box-div3>div").css("align-items","center");
                    $(".Suggested-Follows-box-div3>div").css("width","100%");
                    $(".Suggested-Follows-box-div3>div").css("justify-content","space-between");
                })
            }
        })

        function Attention(event,id) {
            let src = event.target;
            console.log()
            if(src.innerHTML == "关注"){
                $.ajax({
                    async: true,
                    url: 'http://localhost:8080/demo05/follow?ac=insertFol',
                    type: "post",
                    data: {id: sessionStorage.getItem("id"),uid:id},
                    dataType: "json",
                    success: function (pb) {
                        if(pb.data){
                            src.innerHTML = "已关注";
                            $("#img"+id+"").css("display","none")
                            selectgz();
                        }
                    }
                });
            }else if(src.innerHTML == "取消关注"){
                $.ajax({
                    async: true,
                    url: 'http://localhost:8080/demo05/follow?ac=updateFol',
                    type: "post",
                    data: {id:sessionStorage.getItem("id"),uid:id},
                    dataType: "json",
                    success: function (pb) {
                        if(pb.data){
                            src.innerHTML = "关注";
                            $("#img"+id+"").css("display","inline")
                            selectgz();
                        }
                    }
                });
            }
        }

        $(".Suggested-Follows-box-div2").on("mouseenter","a",function (event) {
            if(event.target.innerHTML == "已关注"){
                event.target.innerHTML = "取消关注"
            }
        })
        $(".Suggested-Follows-box-div2").on("mouseleave","a",function (event) {
            if(event.target.innerHTML == "取消关注"){
                event.target.innerHTML = "已关注"
            }
        })

        $('.touxiang-img').on('click', function (event) {
            $('.geren-div').toggle();
        });
    });
</script>
</html>
